<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* <!-- 情况1 --> */
        /* .body{
            position: relative;
        } */
        /* .div{
            width: 200px;
            height: 200px;
            background-color: bisque;
            margin: 100px;
        }
        .box{ */
           /* display: inline-block; */
            /* float: left; */

           /* position: absolute; */
        /* } */


        /* <!-- 情况2 --> */
        /* .r{
            width: 300px;
            height: 300px;
            background-color: crimson; */
            /* display: flex; */
            
        /* } */
        /* .u{ */
            /* width: 100px;
            height: 100px;
            background-color: darkblue; */
            /* float: left; */
            /* display: inline-block; */
           
        /* }  */





        /* <!-- 情况3 --> */
        /* .c{
            width: 100px;
            height: 100px;
            background-color: crimson;
            float: left;
        }
        .d{
            width: 100px;
            height: 100px;
            background-color: darkblue;
            overflow: hidden;
        }  */



         /* .c{
            width: 500px;
            height: 100px;
            background-color: crimson;
            overflow: hidden;
        }
        .v{
            width: 100px;
            height: 100px;
            background-color: darkblue;
            float: left;
        }   */


        .r{
            width: 500px;
            /* height: 100px; */
            background-color: crimson;
           
        }
        .u{
            width: 100px;
            height: 100px;
            background-color: darkblue;
            float: left;
        } 
    </style>
</head>

<body>
    <!-- 一个BFC区域只包含其子元素，不包括其子元素的子元素。
    并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。
    不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。 -->
    <!-- 情况1 -->
    <!-- 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠 -->
    <!-- <div class="box">
        <div class="div"></div>
    </div>
    <div class="box">
        <div class="div"></div>
    </div> -->



    <!-- 情况2 -->
    <!-- 属于同一个 BFC 的两个相邻 Box 垂直排列 -->
    <!-- <div class="r">
        <div class="u"></div>
        <div class="u" style="background-color: darkgoldenrod;"></div>
        <div class="u" style="background-color: blueviolet;"></div>
    </div> -->




    <!-- 情况3 -->
    <!-- BFC 的区域不会与 float 的元素区域重叠 -->
    <!-- <div class="c"></div>
    <div class="d"></div> -->


    <!-- 计算 BFC 的高度时，浮动子元素也参与计算 -->
    <!-- <div class="c">
        <div class="v"></div>
        <div class="v"></div>
    </div> -->


    <!-- 文字层不会被浮动层覆盖，会环绕于周围 -->
    <div class="r">
        <span>asdfuuhoi</span>
        <div class="u"></div>
    </div>



</body>

</html>